<template>
  <div>
    <a-steps
      :current="1"
      size="small"
      :items="items"
    ></a-steps>

    <a-divider></a-divider>
    <a-steps
      v-model:current="current"
      :current="current"
      :items="items"
      :percent="80"
      label-placement="vertical"
    >

      <!-- <template #progressDot="{ index, status, prefixCls }">
        <a-popover>
          <template #content>
            <span>step {{ index }} status: {{ status }}</span>
          </template>
          <span :class="`${prefixCls}-icon-dot`" />
        </a-popover>
      </template> -->
    </a-steps>
    <div class="steps-content">
      {{ steps[current].content }}
    </div>
    <div class="steps-action">
      <a-button
        v-if="current < steps.length - 1"
        type="primary"
        @click="next"
      >Next</a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="toTips"
      >
        Done
      </a-button>
      <a-button
        v-if="current > 0"
        style="margin-left: 8px"
        @click="prev"
      >Previous</a-button>
    </div>

    <a-divider></a-divider>
    <a-list :data-source="data">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta description="Ant Design, a design language for background applications, is refined by Ant UED Team">
            <template #title>
              <a href="https://www.antdv.com/">{{ item.title }}</a>
            </template>
            <template #avatar>
              <a-avatar src="https://joeschmoe.io/api/v1/random" />
            </template>
          </a-list-item-meta>
          <a-steps
            style="margin-top: 8px"
            type="inline"
            :current="item.current"
            :status="item.status"
            :items="items"
          />
        </a-list-item>
      </template>
    </a-list>
    <a-steps
      style="margin-top: 8px"
      type="inline"
      :current="1"
      :items="items"
    />
  </div>
</template>

<script>
import { h } from 'vue';
import {
  UserOutlined,
  SolutionOutlined,
  LoadingOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';
export default {
  name: '',
  components: {},
  data() {
    return {
      description: '描述',
      items: [],
      current: 0,

      steps: [
        {
          title: 'First',
          content: 'First-content',
        },
        {
          title: 'Second',
          content: 'Second-content',
        },
        {
          title: 'Last',
          content: 'Last-content',
        },
      ],
      data: [
        {
          title: 'Ant Design Title 1',
          current: 0,
        },
        {
          title: 'Ant Design Title 2',
          current: 1,
          status: 'error',
        },
        {
          title: 'Ant Design Title 3',
          current: 2,
        },
        {
          title: 'Ant Design Title 4',
          current: 1,
        },
      ]
    }
  },
  created() { },
  mounted() {
    this.items = this.steps.map(item => ({
      key: item.title,
      title: item.title,
    }))
  },
  methods: {
    next() {
      this.current++
    },
    prev() {
      this.current--
    },
    toTips() {
      alert('你好')
    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}

[data-theme="dark"] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
</style>
